<template>
    <div class="app-container" v-loading="loadings">
        <!-- 资产明细 -->
        <h5 class="titleInfo">
            <span>
                资产明细
            </span>
            <span class="moneySpan">
                可用余额
                <span class="red">
                    {{avlBal}}
                </span>
                元
            </span> 
        </h5>
        <div class="refundReceipt">
            <!-- 查询模块 -->
            <el-form :model="form" ref="form" label-width="130px" :inline="true">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="类型">
                            <el-select v-model="form.tradeType" placeholder="请选择">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in statusType"
                                    :key="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="查询时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="dates"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="alignRight">
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv">
            <el-table :data="tableData" border style="width: 100%" ref="tableData">
                <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="tradeType" label="类型">
                    <template slot-scope="scope">{{scope.row.tradeType | tradeType}}</template>
                </el-table-column>
                <el-table-column prop="bankName" label="银行名称">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.withdrawInfo">{{scope.row.withdrawInfo.bankName}}</span>
                            <span v-else></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="bankCard" label="银行卡号">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.withdrawInfo">{{scope.row.withdrawInfo.bankCard}}</span>
                            <span v-else></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="户名">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.withdrawInfo">{{scope.row.withdrawInfo.username}}</span>
                            <span v-else></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="tradeSn" label="交易单号"></el-table-column>
                <el-table-column prop="amount" label="交易金额"></el-table-column>
                <el-table-column prop="comAmt" label="手续费"></el-table-column>
                <el-table-column prop="avlBal" label="余额"></el-table-column>
                <el-table-column prop="createdAt" label="创建时间"></el-table-column>
            </el-table>
            <!-- 分页列表 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.pageNum"
                        :page-sizes="page_sizes"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page_totals"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import withdrawal from "@/api/withdrawal";
import commonFn from "@/utils/common";
export default {
    name: "assetsReport",
    data() {
        return {
            loadings:true,
            avlBal:null,
            // table列表
            tableData: [
            ],
            // 类型
            statusType: [
                {
                    label:"全部",
                    value:"",
                },
                {
                    label:"提现",
                    value:"0",
                },
                {
                    label:"入账",
                    value:"1",
                },
                {
                    label:"充值",
                    value:"2",
                },
                {
                    label:"退款",
                    value:"3",
                }
            ],
            // form表单
            form: {
                targetId:null,
                tradeType: "",
                beginCreatedAt: null,
                endCreatedAt: null,
                pageSize: 10,
                pageNum: 1
            },
            dates: null,
            hospitalList: [],
            page_sizes: [10, 30, 50, 100], //每页显示个数
            page_totals: 60 //总条目数
        };
    },
    // 过滤器
    filters: {
        //类型
        tradeType(e){
            switch(e){
                case "0":
                    return "提现"
                case "1":
                    return "入账"
                case "2":
                    return "充值"
                case "3":
                    return "退款"
            }
        }
    },
    mounted() {
        // this.avlBal = JSON.parse(this.$route.query.userId);
        this.form.targetId = String(this.$store.state.user.hospitalId)
        this.getWithdrawalInfo()
        this.getList(this.form)
    },
    methods: {
        // 获取余额
        getWithdrawalInfo(){
            let datas = {
                id:String(this.$store.state.user.hospitalId) 
            }
            withdrawal
                .getWithdraw(datas)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data
                        this.avlBal = Number(resData.avlBal)
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 按钮权限
        hasPermission(e) {
            return window.helper.hasPermission(e);
        },
        // 主页列表
        getList(e) {
            withdrawal
                .listTradeRecord(e)
                .then(res => {
                    // console.log(res)
                    if (!res.data.code) {
                        let resData = res.data.data;
                        this.tableData = resData.list;
                        this.page_totals = resData.count;
                        // console.log(res);
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.loadings = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.loadings = false;
                });
        },
        // 查询
        handleSearch() {
            this.form.pageNum = 1
            if (this.dates != null) {
                if (this.dates.length > 0) {
                    this.form.beginCreatedAt = this.dates[0];
                    this.form.endCreatedAt = this.dates[1];
                } else {
                    this.form.beginCreatedAt = null;
                    this.form.endCreatedAt = null;
                }
            } else {
                this.form.beginCreatedAt = null;
                this.form.endCreatedAt = null;
            }
            // console.log(this.form)
            this.getList(this.form);
        },
        // 每页显示条数
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getList(this.form);
        },
        // 当前页
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getList(this.form);
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
.app-container{padding: 0.1px!important}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.exportButton {
    text-align: right;
}
.refundReceipt,.listDiv{padding: 0 20px!important}
.red{color: red}
.moneySpan{float:right;margin-right: 20px}
</style>